<template>
  <view>
    <!-- 搜索框 -->
    <view class="search-p-box"><uni-search-bar @input="input" placeholder="请输入搜索内容" :radius="18" cancelButton="none"></uni-search-bar></view>
    <!-- 搜索列表 -->
    <view class="search-p-list" v-if="searchSuggestion.length !== 0">
      <view class="p-list-item" v-for="(item, index) in searchSuggestion" :key="index" @click="gotoGoodsInfo(item)">
        <text>{{ item.goods_name }}</text>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
    </view>
    <!-- 搜索历史 -->
    <view class="search-p-history" v-else>
      <view class="p-history-title">
        <text>搜索历史</text>
        <uni-icons type="trash" size="16" @click="clean"></uni-icons>
      </view>
      <view class="p-history-tagbox"><uni-tag :text="item" v-for="(item, index) in reserveTagListData" :key="index" @click="targetGoodsList(item)"></uni-tag></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timer: null, //防抖处理
      searchSuggestion: [], //搜索联想数据
      value: '', //搜索框数据
      tagListData: [] //历史记录数据
    };
  },
  onLoad() {
    this.tagListData = JSON.parse(uni.getStorageSync('searchHistory')) || '[]';
  },
  methods: {
    input(e) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.value = e.value;
        this.getSearchSuggestion();
      }, 500);
    },
    async getSearchSuggestion() {
      if (this.value === '') return (this.searchSuggestion = []);
      const { data: res } = await uni.$http.get('/api/public/v1/goods/qsearch', { query: this.value });
      console.log(res);
      if (res.meta.status !== 200) return uni.$showMsg();
      this.searchSuggestion = res.message;
      this.saveLocastorage();
    },
    gotoGoodsInfo(item) {
      uni.navigateTo({
        url: '../goods_detail/goods_detail?goods_id=' + item.goods_id
      });
    },
    saveLocastorage() {
      var set = new Set(this.tagListData);
      set.delete(this.value);
      set.add(this.value);
      this.tagListData = Array.from(set);

      uni.setStorageSync('searchHistory', JSON.stringify(this.tagListData));
    },
    clean() {
      this.tagListData = [];
      uni.setStorageSync('searchHistory', '[]');
    },
    targetGoodsList(item) {
      uni.navigateTo({
        url: '/subpages/goods_list/goods_list?query=' + item
      });
    }
  },
  computed: {
    reserveTagListData() {
      return [...this.tagListData].reverse();
    }
  }
};
</script>

<style lang="scss">
.search-p-list {
  padding: 0 13px;
  .p-list-item {
    display: flex;
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid #efefef;
    text {
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.search-p-history {
  padding: 15rpx 18rpx;
  .p-history-title {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #efefef;
    padding: 0 0 15rpx 0;
    text {
      font-size: 28rpx;
    }
  }
  .p-history-tagbox {
    display: flex;
    flex-wrap: wrap;
    .uni-tag {
      margin: 8rpx 12rpx;
    }
  }
}
</style>
